<template>
  <div class="dice-same">
    <div class="select-row border-bottom">
      <div class="top">
        <tail-box :place="item.place.context" class="tail-box-adjust"></tail-box>
      </div>
      <div class="bottom">
        <lottery-dice
          v-for="(dices, pIndex) in item.numbers" 
          :key="dices.id"
          :dices="dices"
          class="dice-adjust"
          @click.native="handleLotterySelect(pIndex)"
          >
        </lottery-dice>
      </div>
    </div>
  </div>
</template>

<script>
import TailBox from '@/components/tail-box/tail-box'
import LotteryDice from '@/components/base/lottery-dice/lottery-dice'
import { mapGetters, mapMutations } from 'vuex'
export default {
  components: {
    TailBox,
    LotteryDice
  },
  props: {
    item: {
      type: Object,
      default: function() {
        return {
          id: 1,
          place: {
            context: '复选'
          },
          diceInfo: [
            {
              id: 1,
              selected: false,
              numbers: '1,1',
              color: 'red',
              icon: 'iconshaizi_one',
            },
            {
              id: 2,
              selected: false,
              numbers: '2,2',
              icon: 'iconshaizi_two',
            },
            {
              id: 3,
              selected: false,
              numbers: '3,3',
              icon: 'iconshaizi_three',
            },
            {
              id: 4,
              selected: false,
              numbers: '4,4',
              color: 'red',
              icon: 'iconshaizi_four',
            },
            {
              id: 5,
              selected: false,
              numbers: '5,5',
              icon: 'iconshaizi_fives',
            },
            {
              id: 6,
              numbers: '6,6',
              icon: 'iconshaizi_six',
              selected: false
            },
          ]
        }
      }
    }
  },
  data() {
    return {
    }
  },
  methods: {
    handleLotterySelect(index) {
      let diceObj = this.clonedItem.numbers[index]
      diceObj.selected = diceObj.selected ? false : true
      this.$emit('click', this.clonedItem)
    }
  },
  computed: {
    clonedItem() {
      return JSON.parse(JSON.stringify(this.item))
    },
  }
}
</script>

<style lang="stylus" scoped>
    .select-row 
      .top 
        box-sizing border-box 
        padding 10px
        .tail-box-adjust 
          width 45px 
          height 25px 
          line-height 25px
          box-sizing border-box
          display flex 
          align-items center
          justify-content center
      .bottom 
        display flex
        flex-wrap wrap
        justify-content space-between
        box-sizing border-box 
        width 80%
        margin 0 auto
        .dice-adjust 
          display flex 
          justify-content center
          width 50%
          box-sizing border-box
          margin-bottom 10px
          
          
</style>